<style>
    #App-loader {background: white;}
   .box {padding-top:20px;}
   .divcss5{
        float:left;
        width:23%;
        height:120px;
        border:1px solid;
        margin-bottom:20px;
        margin-left: 100px;
        /*overflow: hidden;*/
        padding: 30px;
        border-color: rgba(233, 233, 233, 1);
    }
    .divcss4{
        float:left;
        width:17%;
        height:120px;
        border:1px solid;
        margin-bottom:20px;
        margin-left: 100px;
        /*overflow: hidden;*/
        padding: 30px;
        border-color: rgba(233, 233, 233, 1);
    }
    .textp{
        text-align: center;
        font-size: 30px;
        color: white;
    }
    /*.content {le>*/
        /*width: 300px;*/
        /*height: 300px;*/
        /*background: orange;*/
    /*}*/
/*    .divcss6{
        float:left;
        width:17%;
        height:200px;
        border:1px solid;
        margin-bottom:20px;
        margin-right: 160px;
        margin-left: 100px;
        overflow: hidden;
        padding-top: 30px;
    }
*/    .clear_both {clear:both;}
    .table-head {
        padding-right: 17px;
        background-color: #FFFFFF;
        color: #000000;
    }

    .table-body {
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }

    .table-head table, .table-body table {
        width: 100%;
    }

    .table-body table tr:nth-child(2n+1) {
        background-color: #f2f2f2;
    }
    .know{
        size:5;
        color: rgba(0, 0, 0, 0.647058823529412);
        text-align: left;
        color: white;
    }
</style>
<div class="row" style="background: white; padding: 10px;">
        <div class="box">
            <div class="divcss5" style="background-color: rgba(88, 163, 247, 1);">
                <!--<i class="fa fa-trash-o"></i>-->
                <font class="know">新用户</font>
                <br/><br/>
                <p class="textp"><b>{$newUserNum}</b></p>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="divcss5" style="background-color: rgba(255, 102, 153, 1);">
                <font class="know">
                    设备总数
                </font>
                <br/><br/>
                <p class="textp"><b>{$deviceNum}</b></p>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <div class="divcss5" style="background-color: rgba(255, 192, 61, 1);">
                <font class="know">
                    今日营收
                </font>
                <br/><br/>
                <p class="textp"><b>{$todayMoney}</b></p>
            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
</div>
<div class="row" style="background: white; padding: 10px;">
    <div class="box">
        <div class="divcss4" style="background-color: rgba(88, 163, 247, 1);">
            <font class="know">场地</font>
            <br/><br/>
            <p class="textp"><b>{$siteNum} 家</b></p>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="divcss4" style="background-color: rgba(255, 102, 153, 1);">
            <font class="know">
                代理商
            </font>
            <br/><br/>
            <p class="textp"><b>{$agentNum} 个</b></p>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <div class="divcss4" style="background-color: rgba(255, 192, 61, 1);">
            <font class="know">
                今日订单数
            </font>
            <br/><br/>
            <p class="textp"><b>{$todayOrderNum} 单</b></p>
        </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="divcss4" style="background-color: rgba(255, 155, 30, 1);">
            <font class="know">
                总用户数
            </font>
            <br/><br/>
            <p class="textp"><b>{$userNum} 个</b></p>
        </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</div>
<div style="clear: both;"></div>
<div class="row">
    <style type="text/css">
        .i1{padding:5px; margin: 5%;width: 30px; height: 30px; border-radius: 50%;background-color: #DDDDDD;}
        .i2{padding:5px; margin: 5%;width: 30px; height: 30px; border-radius: 50%;background-color: black; color:#F7F7F7;}
    </style>
    <div class="col-xs-12 col-md-12" style="background-color:#fbfbfb;">
        <div>
            <div class="widget-body" >
                <div class="table-toolbar" style="padding-bottom: 25px;">
                    <!--<div class="content" >class="pull-left"-->

                    <div   style="text-align: center;">
                        <form id="App-search">
                            <!--<label style="margin-bottom: 10px;">-->
                                <!--<div class="col-xs-5" style="padding-left: 0px;padding-right: 0px;margin-top: 1px;width: 350px">-->
                                    <!--<div class="input-group margin">-->
                                        <!--<span class="input-group-addon" style="color: #2DC3E8;">时间段</span>-->
                                        <!--<span class="input-group-addon" style="color: #2DC3E8;"><i class="fa fa-calendar"></i></span>-->
                                        <!--<input type="text" class="form-control pull-left" id="play_time" name="play_time" value="{$play_time}"/>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</label>-->
                            <!--<script type="text/javascript">-->
                                <!--$(function () {-->
                                    <!--$('#play_time').daterangepicker({-->
                                        <!--showDropdowns: true,-->
                                        <!--ranges: {-->
                                            <!--'今天': [moment(), moment()],-->
                                            <!--'昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],-->
                                            <!--'最近7天': [moment().subtract('days', 6), moment()],-->
                                            <!--'最近30天': [moment().subtract('days', 29), moment()],-->
                                            <!--'上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]-->
                                        <!--},-->
                                        <!--locale: {-->
                                            <!--customRangeLabel: '自定义',-->
                                        <!--},-->
                                    <!--});-->
                                <!--})-->
                            <!--</script>-->

                            <a href="{:url('dlc/index/main',array('type'=>1))}" {if condition="$type eq 1" } class="btn btn-success" {else/} class="btn btn-gray" {/if} data-loader="App-loader" data-loadername="首页" data-search="App-search" style="margin-bottom:10px;height: 30px;">
                                今日
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="{:url('dlc/index/main',array('type'=>2))}"  {if condition="$type eq 2"} class="btn btn-success" {else/} class="btn btn-gray" {/if} data-loader="App-loader" data-loadername="首页" data-search="App-search" style="margin-bottom:10px;height: 30px;">
                                本周
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="{:url('dlc/index/main',array('type'=>3))}"  {if condition="$type eq 3"} class="btn btn-success" {else/} class="btn btn-gray" {/if} data-loader="App-loader" data-loadername="首页" data-search="App-search" style="margin-bottom:10px;height: 30px;">
                               本月
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </form>
                    </div>
                </div>
                <!--<div style="width: 100%"><hr/></div>-->
                <!--   <hr/>
                 <br/><br/> -->
                <div class="table-toolbar" style="padding:0px;">
                    <div style=" width:100%; height: 600px;" id="money" class="pull-left" ></div>&nbsp;&nbsp;&nbsp;&nbsp;


                </div>
            </div>
        </div>

    </div>
</div>
<!--面包屑导航封装-->
<div id="tmpbread" style="display: none;">{$breadhtml}</div>
<script type="text/javascript">
setBread($('#tmpbread').html());
</script>
<!--/面包屑导航封装-->
<!--图表特性封装-->
<script type="text/javascript">
InitiateEasyPieChart.init();
</script>
<!--图表逻辑-->
<script type="text/javascript">
    var money = echarts.init(document.getElementById('money'));

    var option_money = {
        title: {
            text: '{$title}'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:JSON.parse('{$name}')
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: JSON.parse('{$date}')
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} '
            }
        },
        series: JSON.parse('{$item}')
    };

    // 为echarts对象加载数据
    money.setOption(option_money);
</script>
